<template>
    <div>
        <button @click="add">add</button>
        <button @click="clear">clear</button>
        <ul>
            <li v-for="item in data">
                {{item.name}}={{item.value}}
            </li>
        </ul>
    </div>
</template>
<style>
</style>
<script>
    var localForage = require('localforage')

    export default{
        data(){
            return {
                data: []
            }
        },
        ready(){
            this.show()
        },
        methods: {
            add(){
                localForage.setItem('key' + Math.random(), 'value' + Math.random())
                this.show()
            },
            show(){
                var ctx = this;
                var result = []
                localForage.iterate(function (value, key, iterationNumber) {
                    result.push({name: key, value: value});
                }).then(function () {
                    ctx.data = result;
                }).catch(function (err) {
                    console.log(err);
                });
            },
            clear(){
                localForage.clear();
                this.show()
            }

        },
        components: {}
    }
</script>
